<template>
	<div class="index-container">
		<div id="index-header">
			<center><h2>联系人</h2></center>
		</div>
		<el-form :inline="true"><!-- :inline表示行内表单 -->
		  <el-form-item style="float: right;">
		    <el-button type="primary" @click="addContactFormVisible=true" id="buttonAdd">添加宿管</el-button>
		  </el-form-item>
		</el-form>
		
		
		<el-table :data="contactList" border style="width: 100%">
			<el-table-column fixed prop="contactId" label="序号">
			</el-table-column>
			<el-table-column prop="contactName" label="姓名">
			</el-table-column>
			<el-table-column prop="contactPhone" label="电话">
			</el-table-column>
			<el-table-column prop="contactEmail" label="邮箱">
			</el-table-column>
			<el-table-column fixed="right" label="操作">
				<template slot-scope="scope">
				<el-button type="text" size="small" @click="showUpdateContactDialog(scope.row)">修改</el-button>
				<el-button type="text" size="small" @click="deleteContact(scope.row.contactId)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="pageNumber"
			:page-sizes="[5,10, 20, 30, 40]"
			:page-size="pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total">
		</el-pagination>
	  
		<!-- 添加联系人对话框-->
		<el-dialog title="添加联系人" :visible.sync="addContactFormVisible">
			<el-form :model="addContact">
				<el-form-item label="姓名" label-width="120px">
					<el-input v-model="addContact.contactName" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="电话" label-width="120px">
					<el-input v-model="addContact.contactPhone" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" label-width="120px">
					<el-input v-model="addContact.contactEmail" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancelAddContact">取 消</el-button>
				<el-button type="primary" @click="saveContact">确 定</el-button>
			</div>
		</el-dialog>
		  
		<!-- 修改联系人对话框-->
		<el-dialog title="修改联系人" :visible.sync="updateContactFormVisible">
			<el-form :model="updateContact">
				<el-form-item label="ID" label-width="120px">
					<el-input v-model="updateContact.contactId" autocomplete="off" :disabled = "true"></el-input>
				</el-form-item>
				<el-form-item label="姓名" label-width="120px">
					<el-input v-model="updateContact.contactName" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="电话" label-width="120px">
					<el-input v-model="updateContact.contactPhone" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" label-width="120px">
					<el-input v-model="updateContact.contactEmail" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
			  <el-button @click="cancelUpdateContact">取 消</el-button>
			  <el-button type="primary" @click="modifyContact">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() { //定义组件全局变量
		  return {
			  contactList:[],
			  pageNumber:1,
			  pageSize:10,
			  total:0,
			  addContactFormVisible:false,//初始界面是否显示添加用户对话框，不显示，等到点添加再显示
			  addContact:{},
			  updateContactFormVisible:false,
			  updateContact:{}
		  }
		},
		methods:{
			handleSizeChange(newSize){//触发事件
			  //将修改的pageSize值赋给this.pageSize
			  this.pageSize=newSize;
			  this.getContactList();
			},
			handleCurrentChange(newPage){
			  this.pageNumber=newPage;
			  this.getContactList();
			},
			getContactList(){
				var params = {};//自定义对象
				params.pageNumber = this.pageNumber;
				params.pageSize = this.pageSize;
				this.$axios.get('/contact/contactPage',{params:params})
				.then(result =>  {
				  var data = result.data;
				  this.total = data.data.total;
				  this.contactList = data.data.records;
				})
				.catch(e => {
				  console.log(e);
				})
			},
			cancelAddContact(){//取消添加用户
			  this.addContact = {};
			  //将对话框标记设置为false
			  this.addContactFormVisible = false;
			},
			saveContact(){//确认添加用户
			  this.$axios.post('/contact/addContact',this.addContact)
			  .then(result => {
			    var data = result.data;
			    if(data.code == 200){
			      //提示信息
			      this.$message.success(data.msg);
			      //关闭对话框
			      this.addContactFormVisible = false;
			      this.getContactList();
			      this.addContact = {}
			    } else {
			      //提示信息
			      this.$message.warning(data.msg);
			    }
			  })
			  .catch(e => {
			    console.log(e);
			  })
			},
			showUpdateContactDialog(row){
			  this.updateContactFormVisible = true;
			  this.updateContact = row;
			},
			cancelUpdateContact(){
			  this.updateContactFormVisible = false;
			  this.getContactList();
			},
			modifyContact(){
			  this.$axios.post('/contact/updateContact',this.updateContact)
			  .then(result => {
			    var data = result.data;
			    if(data.code == 200){
			      this.$message.success(data.msg);
			      this.updateContactFormVisible = false;
			    }else{
			      this.$message.warning(data.msg);
			    }
			  })
			  .catch(e => {
			    console.log(e);
			  })
			},
			deleteContact(id){
			  this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
			            confirmButtonText: '确定',
			            cancelButtonText: '取消',
			            type: 'warning'})
			          .then(() => {
			            this.$axios.get('/contact/deleteContact',{params:{"contactId":id}})
			            .then(result => {
			                var data = result.data;
			                if(data.code == 200){
			                  this.$message.success(data.msg);
			                  this.pageNumber=1;
			                  this.pageSize=10;
			                  this.getContactList();
			                }else{
			                  this.$message.warning(data.msg);
			                }
			            })
			            .catch(e=>{
			              console.log(e);
			            })
			
			          })
			          .catch(() => {
			            this.$message({
			              type: 'info',
			              message: '已取消删除'
			            });
			          });
			}
			
		},
		mounted() {
			this.getContactList();
		}
	}
</script>

<style scoped>
	#index-header{
		background-color: #999999;
		height: 50px;
		display: flex; /* 将body设置为Flex容器 */
		justify-content: center; /* 水平居中 */  
		align-items: center; /* 垂直居中 */  
	}
	#buttonAdd{
		position: relative;
		top: 15px;
	}
</style>
